<template>
  <el-row gutter="15">
    <el-col :span="10">
      <el-card style="width: 100%">
        <template #header>
          <div class="card-header">
          <span>最近打印</span>
          </div>
        </template>
        <el-table :data="printHistory" border >
          <el-table-column prop="date"    label="时间" align="center"/>
          <el-table-column prop="ae"      label="AE"   align="center"/>
          <el-table-column prop="size"    label="尺寸" align="center"/>
          <!-- <el-table-column prop="remark"  label="备注"  align="center"/> -->
        </el-table>
      </el-card>
    </el-col>

    <!-- 右侧信息栏 -->
    <el-col :span="6">

      <!-- 打印统计-AE -->
      <el-card>
        <template #header>
          <div class="card-header">
          <span>打印统计-AE</span>
          </div>
        </template>
        <el-table :data="statusticsByAE" border >
          <el-table-column prop="ae" label="AE" align="center"/>
          <el-table-column prop="count" label="打印张数"  align="center"/>
        </el-table>
      </el-card>
      <h1></h1>

      <!-- 打印统计-尺寸 -->
      <el-card>
        <template #header>
          <div class="card-header">
          <span>打印统计-尺寸</span>
          </div>
        </template>

        <el-table :data="statisticsBySize" border >
          <el-table-column prop="size" label="尺寸" align="center"/>
          <el-table-column prop="count" label="打印张数" align="center" />
        </el-table>
        
      </el-card>

      <h1></h1>
      <!-- 设备状态 -->
    </el-col>

    <el-col :span="8">
      <el-card>
        <template #header>
          <div class="card-header">
          <span>设备状态</span>
          </div>
        </template>

        <el-table :data="deviceAttr" border show-header="false">
          <el-table-column prop="dcmKey"  label="dcmKey" align="center"/>
          <el-table-column prop="name"    label="属性"  align="center"/>
          <el-table-column prop="value"   label="属性值"  align="center"/>
        </el-table>
        
      </el-card>
    </el-col>
  </el-row>
</template>



<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import axios from 'axios';

const printHistory = ref([]);
const statusticsByAE = ref([]);
const statisticsBySize = ref([]);
const deviceAttr = ref([]);


onMounted(async () => {
  try {
    const response = await axios.get('/restful/print-history/last');
    printHistory.value = response.data.content.data;
  } catch (error) {
    console.error('API call failed:', error);
  }

  try {
    const response = await axios.get('/restful/print-statistics/ae');
    statusticsByAE.value = response.data.content.data;
  } catch (error) {
    console.error('API call failed:', error);
  }

  try {
    const response = await axios.get('/restful/print-statistics/size');
    console.log(response)
    statisticsBySize.value = response.data.content.data;
  } catch (error) {
    console.error('API call failed:', error);
  }

  
  try {
    const response = await axios.get("/restful/device-attribute");
    deviceAttr.value = response.data.content.data;
  } catch (error) {
    console.error('API call failed:', error);
  }

});


</script>


